<template>
	<view class="EditUserInfoBox">
		<cu-custom :isBack="true" fhColor="#000" textColor="#000">
			<block slot="content">账户信息</block>
		</cu-custom>
		<view class="EditUserInfo">
			<view class="AvatarArea">
				<view class="AvatarTitle"> 头像 </view>
				<img :src="userInfo.avatarUrl" class="AvatarImage" alt="" @click="UploadImage" />
			</view>

			<view class="AccountInformation">
				<view class="item">
					<view class="left">昵称</view>
					<view class="right" @click="showModal('昵称', userInfo.nickName)">
						<view class="content">
							{{userInfo.nickName == null
							  ? "未填写"
							  : userInfo.nickName}}
						</view>
						<view class="icon">
							<view class="icon">
								<img :src="imgUrl + 'Jt.png'" class="jt" alt="" />
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="item">
					<view class="left">公司名称</view>
					<view class="right" @click="showModal('公司名称', userInfo.companyName)">
						<view class="content">
							{{userInfo.companyName == null
							  ? "未填写"
							  : userInfo.companyName}}
						</view>
						<view class="icon">
							<view class="icon">
								<img :src="imgUrl + 'Jt.png'" class="jt" alt="" />
							</view>
						</view>
					</view>
				</view>

				<view class="item">
					<view class="left">联系人</view>
					<view class="right" @click="showModal('联系人', userInfo.contacts)">
						<view class="content">
							{{
							  userInfo.contacts == null
							    ? "未填写"
							    : userInfo.contacts
							}}
						</view>
						<view class="icon">
							<view class="icon">
								<img :src="imgUrl + 'Jt.png'" class="jt" alt="" />
							</view>
						</view>
					</view>
				</view>

				<view class="item">
					<view class="left">联系电话</view>
					<view class="right" @click="showModal('联系电话', userInfo.contactPhone)">
						<view class="content">
							{{
							  userInfo.contactPhone == null
							    ? "未填写"
							    : userInfo.contactPhone
							}}
						</view>
						<view class="icon">
							<view class="icon">
								<img :src="imgUrl + 'Jt.png'" class="jt" alt="" />
							</view>
						</view>
					</view>
				</view>
 -->
				<view class="item">
					<view class="left">账号</view>
					<view class="right">
						<view class="content">
							{{ userInfo.phone == null ? "未填写" : userInfo.phone }}
						</view>
						<view class="icon">
							<view class="icon">
								<!-- <img :src="imgUrl + 'Jt.png'" class="jt" alt="" /> -->
							</view>
						</view>
					</view>
				</view>

			</view>
			<uni-card class="card" v-if="isShow" :title="'修改'+EditText">
				<input type="text" v-model="InputText">
				<view class="btn">
					<view class="cancel" @click="clearModal">取消</view>
					<view class="confirm" @click="confirm">
						确定
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public.js";
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

				imgUrl: this.$http.imgUrl + '/static/my/',

				gameDetailsData: gameDetails,

				isShow: false,

				EditText: "",

				InputText: "",
			};
		},
		created() {

		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			// 显示修改框
			showModal(condition, value) {
				this.isShow = true
				this.EditText = condition
				this.InputText = value
			},
			// 关闭输入框
			clearModal() {
				this.isShow = false
				this.EditText = ''
				this.InputText = ''
			},
			// 点击确认
			confirm() {
				if (this.EditText === '昵称') {
					this.userInfo.nickName = this.InputText
				} else if (this.EditText === '公司名称') {
					this.userInfo.companyName = this.InputText
				} else if (this.EditText === '联系人') {
					this.userInfo.contacts = this.InputText
				} else if (this.EditText === '联系电话') {
					this.userInfo.contactPhone = this.InputText
				}
				this.edit()
				this.clearModal()
			},
			// 修改个人信息
			async edit() {
				await this.$http.post(this.api.my.EditUserInfo, {
					avatarUrl: this.userInfo.avatarUrl, // 	头像地址		false	
					companyName: this.userInfo.companyName, // 	公司名称		false	
					contactPhone: this.userInfo.contactPhone, // 	联系人电话		false	
					contacts: this.userInfo.contacts, // 	联系人		false	
					nickName: this.userInfo.nickName, // 	昵称		false	
				})
			},
			// 图片上传
			UploadImage() {
				// this.EditEnglishText = 'avatarUrl'
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const url = this.api.my.UploadImage;
						console.log(chooseImageRes, "上传图片");
						uni.uploadFile({
							url: "https://j.kaletcg.com/lzmtest" + url,
							filePath: chooseImageRes.tempFilePaths[0],
							name: "file",
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data);
								this.userInfo.avatarUrl = res.data
								this.edit()
								// uni.setStorageSync("avatar", res.data);
								// this.ConfimAndCancel(true, res.data);
								// this.getMyInfoDetalis();
							},
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.EditUserInfoBox {
		height: 100%;
		width: 100%;

		.EditUserInfo {
			height: 100%;
			width: 100%;
			background-color: #f5f5f5;

			.AvatarArea {
				height: 200rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 0rpx 20rpx;
				justify-content: space-between;

				.AvatarTitle {
					color: #000;
					opacity: 0.4;
				}

				.AvatarImage {
					height: 150rpx;
					width: 150rpx;
					background-color: #000;
				}
			}

			.AccountInformation {
				margin-top: 20rpx;
				width: 100%;
				background-color: #FFFFFF;

				.item {
					height: 100rpx;
					display: flex;
					align-items: center;
					width: 90%;
					margin: 0 auto;

					.left {
						flex: 1;
						color: #666;
						font-size: 28rpx;
						opacity: 0.8;

						&.last {
							flex: 2;
						}
					}

					.right {
						flex: 3;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						&.last {
							flex: 2;
							margin-right: 44rpx;
						}

						.content {
							color: #a5a5a5;
							font-size: 24rpx;
						}

						.icon {
							margin-left: 30rpx;
							width: 24rpx;
							height: 24rpx;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}



				.InfoItem {
					display: flex;
					align-items: center;
					height: 100rpx;
					padding-left: 20rpx;
					justify-content: space-between;
					margin-bottom: 2rpx solid #e6e6e6;

					.InfoContent {
						display: flex;
						align-items: center;
						height: 100%;

						.arrow {
							width: 20rpx;
							height: 20rpx;
							margin-left: 10rpx;
						}
					}

					.AccountNumberContent {
						margin-right: 20rpx;
					}
				}
			}

			.cu-dialog {
				width: 90%;

				.EditInfo {
					width: 100%;
					height: 300rpx;
					background-color: #FFFFFF;

					.EditInfoTitle {
						width: 100%;
						text-align: start;
						margin-left: 20rpx;
						padding-top: 20rpx;
					}

					.EditInput {
						height: 100rpx;
						width: 100%;
						border-top: 1rpx solid #000;
						border-bottom: 1rpx solid #000;
						margin-top: 20rpx;
						padding-left: 20rpx;

						.Input {
							height: 100%;
							text-align: start;
						}
					}
				}

				.BtnArea {
					width: 100%;
					height: 100rpx;
					display: flex;

					.cancelBtn,
					.ConfimBtn {
						width: 100%;
						line-height: 100rpx;
					}

					.cancelBtn {
						border-right: 1rpx solid #ccc;
					}
				}
			}
		}

		.card {
			position: fixed;
			width: 600rpx;
			height: 240rpx;
			top: 35%;
			left: 50%;
			margin-top: -120rpx;
			margin-left: -300rpx;
			input {
				border-bottom: 2rpx solid #ccc;
			}

			.btn {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				text-align: center;
				width: 516rpx;
				height: 60rpx;
				align-items: center;

				.cancel {
					height: 50rpx;
					width: 50%;
					border-right: 2rpx solid #ccc;
				}

				.confirm {
					height: 50rpx;
					width: 50%;

				}
			}
		}
	}
</style>